<script setup>

import Card from "@/components/Card.vue";
import {Lock, Setting, Switch} from "@element-plus/icons-vue";
import {reactive, ref} from "vue";
import {get, post} from "@/net";
import {ElMessage} from "element-plus";

//表单
//密码
const form = reactive({
  password:'',
  new_password:'',
  new_password_repeat:'',
})
//勾选框
const privacy = reactive({
  phone: false,
  email: false,
  qq:false,
  wx:false,
  gender:false
})
//获取隐私状态
//默认情况不加载
const saving = ref(true)
get("/api/user/privacy",(data)=>{
    privacy.phone = data.phone;
    privacy.email = data.email;
    privacy.qq = data.qq;
    privacy.wx = data.wx;
    privacy.gender = data.gender;
    saving.value = false;
})

//保存隐私设置
//传入目标选项和目标状态
function savePrivacy(type, status){
  saving.value = true
  post('/api/user/save-privacy', {
    type: type,
    status: status
  }, () => {
    ElMessage.success('隐私设置修改成功！')
    saving.value = false
  },(message)=>{
    ElMessage.warning(message)
    saving.value = false
  })
}


//规则校验
//自定义密码验证
const validatePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== form.new_password) {
    callback(new Error("两次输入的密码不一致"))
  } else {
    callback()
  }
}
const rules = {
  password: [
    { required: true, message: '请输入原来的密码', trigger: 'blur' }
  ],
  new_password: [
    { required: true, message: '请输入新的密码', trigger: 'blur' },
    { min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur'] }
  ],
  new_password_repeat: [
    { required: true, message: '请再次输入新的密码', trigger: 'blur' },
    { validator: validatePassword, trigger: ['blur', 'change'] },
  ]
}

const formRef = ref()
const valid = ref(false)
const onValidate = (prop, isValid) => valid.value = isValid

//修改密码
function resetPassword(){
  formRef.value.validate(valid => {
    if(valid) {
      post('/api/user/change-password', form, () => {
        ElMessage.success('修改密码成功！')
        formRef.value.resetFields();
      })
    }
  })
}

</script>

<template>
  <div style="margin: auto;max-width: 650px;">
    <div style="margin-top: 20px">
      <Card
          v-loading="saving"
          :icon="Setting"
          title="隐私设置"
          desc="在这里设置自己的哪些信息可以被看到，请务必注意个人隐私">
        <div class="checkbox-list">
          <el-checkbox @change="savePrivacy('phone', privacy.phone)"
                       v-model="privacy.phone">公开展示我的手机号</el-checkbox>
          <el-checkbox @change="savePrivacy('email', privacy.email)"
                       v-model="privacy.email">公开展示我的电子邮件地址</el-checkbox>
          <el-checkbox @change="savePrivacy('wx', privacy.wx)"
                       v-model="privacy.wx">公开展示我的微信号</el-checkbox>
          <el-checkbox @change="savePrivacy('qq', privacy.qq)"
                       v-model="privacy.qq">公开展示我的QQ号</el-checkbox>
          <el-checkbox @change="savePrivacy('gender', privacy.gender)"
                       v-model="privacy.gender">公开展示我的性别</el-checkbox>
        </div>
      </Card>

      <Card style="margin: 20px 0" :icon="Setting" title="修改密码" desc="请务必牢记您的密码">
        <el-form
            @validate="onValidate"
            ref="formRef"
            :rules="rules"
            :model="form"
            label-width="100" style="margin: 20px">
          <el-form-item label="当前密码" prop="password">
            <el-input :prefix-icon="Lock"
                      v-model="form.password"
                      placeholder="当前密码"/>
          </el-form-item>
          <el-form-item label="新密码" prop="new_password">
            <el-input :prefix-icon="Lock"
                      v-model="form.new_password"
                      placeholder="新密码"/>
          </el-form-item>
          <el-form-item label="重复新密码" prop="new_password_repeat">
            <el-input :prefix-icon="Lock"
                      v-model="form.new_password_repeat"
                      placeholder="重复新密码"/>
          </el-form-item>
          <div style="text-align: center">
            <el-button type="danger" :icon="Switch" @click="resetPassword">
              重置密码
            </el-button>
          </div>
        </el-form>
      </Card>
    </div>
  </div>
</template>

<style scoped>
.checkbox-list{
  margin-top: 10px 0 0 10px;
  display: flex;
  flex-direction: column;
}
</style>